<template>
  
  <a-grid 
    v-if="show==1"
    :cols="24" 
    :row-gap="16" class="panel">
    <a-grid-item :span="24" style="font-size: 20px; line-height: 1.4;">
     
     <a-typography>
        <a-typography-title :heading="6">
          我的客户数据
        </a-typography-title>
      </a-typography>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="线索数量" 
          :value="data1.leadQuantity"
          :precision="1"  
          :value-from="0"
          animation
          show-group-separator
        > 
          <template #suffix>
             <span class="unit"></span>
          </template>
        </a-statistic>
        
      </a-space>
    </a-grid-item>

    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="未跟进线索数量"
          :value="data1.unfollowedLeadQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>

        
      </a-space>
    </a-grid-item>

    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="未完成试听课数量"
          :value="data1.uncompletedTrialLessonQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit"></span>
          </template>
        </a-statistic> 
      </a-space>
    </a-grid-item>

    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
         />
        </a-avatar>
        <a-statistic
          title="未完成正课数量"
          :value="data1.uncompletedLessonQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit"></span>
          </template>
        </a-statistic> 
       
        
      </a-space>
    </a-grid-item>
 
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid> 

  <a-grid 
    v-if="show==2"
    :cols="24" 
    :row-gap="16" class="panel">
    <a-grid-item :span="24" style="font-size: 20px; line-height: 1.4;">
      <a-typography>
        <a-typography-title :heading="6">
          30天未处理线索数据
        </a-typography-title>
      </a-typography>
    </a-grid-item>
    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="未分配线索数量" 
          :value="data2.unassignedLeadQuantity"
          :precision="1"
          :value-from="0"
          animation
          show-group-separator
        > 
          <template #suffix>
             <span class="unit"></span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="未跟进线索数量"
          :value="data2.unfollowedLeadQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid> 

  <a-grid 
    v-if="show==2"
    :cols="24" 
    :row-gap="16" class="panel">
    <a-grid-item :span="24" style="font-size: 20px; line-height: 1.4;">
      <a-typography>
        <a-typography-title :heading="6">
          30天线索统计
        </a-typography-title>
      </a-typography>
     
    </a-grid-item>
    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="入库线索数量" 
          :value="data2.leadReport.inboundQuantity"
          :precision="1"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="分配线索数量"
          :value="data2.leadReport.assignQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="意向线索数量"
          :value="data2.leadReport.prospectiveQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="试听线索数量"
          :value="data2.leadReport.trialQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="成交线索数量"
          :value="data2.leadReport.tradeQuantity"
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="意向率"
          :value="data2.leadReport.prospectiveRate"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
             <span class="unit">%</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="试听率"
          :value="data2.leadReport.trialRate"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
             <span class="unit">%</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
      <a-space> 
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
        </a-avatar>
        <a-statistic
          title="成交率"
          :value="data2.leadReport.tradeRate"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
             <span class="unit">%</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid> 
   
  <a-grid 
    v-if="show==2"
    :cols="24" 
    :row-gap="16" class="panel">
    <a-grid-item :span="24" style="font-size: 20px; line-height: 1.4;">
     
     <a-typography>
        <a-typography-title :heading="6">
          30天订单统计
        </a-typography-title>
      </a-typography>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="订单数量" 
          :value="data2.orderReport.orderQuantity"
          :precision="1"  
          :value-from="0"
          animation
          show-group-separator
        >
        </a-statistic>
        
      </a-space>
    </a-grid-item>

    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="订单总金额"
          :value="data2.orderReport.totalAmount||0"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
             <span class="unit">元</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>

    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="实际收款金额"
          :value="data2.orderReport.actualAmount||0"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
             <span class="unit">元</span>
          </template>
        </a-statistic> 
      </a-space>
    </a-grid-item>

    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
         />
        </a-avatar>
        <a-statistic
          title="待收款金额"
          :value="data2.orderReport.differenceAmount||0"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
             <span class="unit">元</span>
          </template>
        </a-statistic>
        
      </a-space>
    </a-grid-item>
 
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid> 

  <div v-if="show==2" class="arco-grid panel">
    <div style="font-size: 20px; line-height: 1.4;">
      
      <a-typography>
        <a-typography-title :heading="6">
          月度线索折线图
        </a-typography-title>
      </a-typography>
    </div>
    <div style="padding: 20px 0 0 40px;">
    <a-form-item label="线索情况">
      <a-radio-group v-model="radio1" @change="changeRadio1">
        <a-radio value="inboundQuantity">入库数量</a-radio>
        <a-radio value="assignQuantity">分配数量</a-radio>
        <a-radio value="prospectiveQuantity">意向数量</a-radio>
        <a-radio value="trialQuantity">试听数量</a-radio>
        <a-radio value="tradeQuantity">成交数量</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="线索比率">
      <a-radio-group v-model="radio1" @change="changeRadio1">
        <a-radio value="prospectiveRate">意向率</a-radio>
        <a-radio value="trialRate">试听率</a-radio>
        <a-radio value="tradeRate">成交率</a-radio>
      </a-radio-group>
    </a-form-item>
    </div>
    <div id="chart1" style="height:300px"></div>
    <div style="font-size: 20px; line-height: 1.4;">
      
      <a-typography>
        <a-typography-title :heading="6">
          月度订单折线图
        </a-typography-title>
      </a-typography>
    </div>
    <div style="padding: 20px 0 0 40px;">
    <a-form-item label="订单情况">
      <a-radio-group v-model="radio2" @change="changeRadio2">
        <a-radio value="orderQuantity">订单数量</a-radio>
        <a-radio value="totalAmount">订单总金额</a-radio>
        <a-radio value="actualAmount">实际付款金额</a-radio>
        <a-radio value="differenceAmount">待收款金额</a-radio>
      </a-radio-group>
    </a-form-item>
    </div>
    <div id="chart2" style="height:300px"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref,watch } from 'vue';
  import { getSalesConsultantsDashboard, getSalesConsultantsManagerDashboard } from '@/api/dashboard';

  import * as echarts from 'echarts/core';
  import { GridComponent } from 'echarts/components';
  import { LineChart } from 'echarts/charts';
  import { UniversalTransition } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';

  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

  const props = defineProps({
    role: {
      type: String,
      default: ''
    }
  });
  const show = ref(0);
  const data1 = ref({} as any);
  const data2 = ref({leadReport:{},orderReport:{}} as any);
  const radio1 = ref('inboundQuantity');
  const radio2 = ref('orderQuantity');

  watch(props, async (newp, oldp) => {
    if(props.role=='Operator') {
      show.value = 1;
      data1.value = await getSalesConsultants();
    } else if (props.role=='Supervisor') {
      show.value = 2;
      let d = await getSalesConsultantsManager();
      d.leadReport.prospectiveRate = d.leadReport.prospectiveRate*100;
      d.leadReport.trialRate = d.leadReport.trialRate*100;
      d.leadReport.tradeRate = d.leadReport.tradeRate*100;
      data2.value = d;

      changeRadio1();
      changeRadio2();
    }
  });

  function changeRadio1() {
    let data = data2.value.monthlyLeadReport.map((a:any)=>{
      return {
        cate: `${a.year}-${a.month}`,
        value: a[radio1.value] || 0
      }
    });
    renderChart('chart1', data);
  }
  function changeRadio2() {
    let data = data2.value.monthlyOrderReport.map((a:any)=>{
      return {
        cate: `${a.year}-${a.month}`,
        value: a[radio2.value] || 0
      }
    });
    renderChart('chart2', data);
  }

  function renderChart(elId:string, data:Array<any>) {
    let div = document.getElementById(elId) as HTMLElement;
    let myChart = echarts.init(div);
    let option = {
      xAxis: {
        type: 'category',
        data: data.map(a=>a.cate)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.map(a=>a.value),
          type: 'line',
          smooth: true
        }
      ]
    };
    myChart.setOption(option);
  }
</script>

<style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 16px 20px 0 20px;
  }
  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }
  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
  .up-icon {
    color: rgb(var(--red-6));
  }
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }
  :deep(.panel-border) {
    margin: 4px 0 0 0;
  }
</style>
